<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Map pushpins for {{place|escape}} {{people|escape}}</title>
    <script
      src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAALTdx9qjrdl_2yO4uD4jnWxQ_6N4dkHg7_wIKENxVG1go3UnpWxRwWZP6VSh5aDY53HnYXQe1FQQEGw" type="text/javascript"></script>
    <script src="mapiconmaker.js" type="text/javascript"></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body onunload="GUnload()">
    <center>
      <h2>Add a pushpin so other <font color="blue">{{place|escape}}</font> {{people|escape}} know where you {{activity|escape}}</h2>
    </center>
    <table>
      <tr><td>
          <p>First, click on the map where you {{activity|escape}}, or you can enter an address below the map. You can drag your pushpin or
          the map around before you complete the third step.</p>
          <p>Second, in the supplied bubble, fill in your {{pintext|escape}}.<font color="blue"></font></p>
          <p>Third, click the "submit" button if everything looks right. If not,
          start over by reloading the page.  </p>

          <p>Now you are ready to explore the pushpins: roll your mouse slowly over existing pushpins
          and you will see where other {{people|escape}} {{activity|escape}} and may be able to "connect".
          You may remove a pushpin by right-clicking on it.</p>
          <p><tt>{{contact}}</tt></p>
          <p><strong>{{moreinfo|escape}}</strong></p>

          <a href="/">Add a new group</a>
        </td>
        <td>
          <table width="700" height="24" border="1" cellpadding="0" cellspacing="0" id="legend-id" >
    {% for t in color %}
    {% for s in category %}
    {% ifequal forloop.counter forloop.parentloop.counter  %} <td align="center" bgcolor="#{{ t }}"> {{s}} </td> {% endifequal %}
    {% endfor %}
    {% endfor %}
    </table>

          <!--div id="map" style="width: 900px; height: 700px"></div-->
          <div id="map" style="width: 700px; height: 500px"></div>
          <!--a href="store.htm">Back to the tutorial page</a-->

          <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p>
        <input type="text" size="60" name="address" value="Address?" />
        <input type="submit" value="Go!" />
      </p>
      <!--div id="map_canvas" style="width: 500px; height: 300px"></div-->
    </form>

        </td>
      </tr>
      <table>
        <tr>
          <th><font color="blue">*</font>Color</th>
          <th>Hexadecimal</th>
          <th>Color</th>
          <th>Hexadecimal</th>
          <th>Color</th>
          <th>Hexadecimal</th>
          <th>Color</th>
          <th>Hexadecimal</th>
        </tr>
        <tr>
          <td>aqua</td>
          <td style="background:#0FF; color:#000; font-family:monospace;">#00FFFF</td>
          <td>gray</td>
          <td style="background:#808080; color:#FFF; font-family:monospace;">#808080</td>
          <td>navy</td>
          <td style="background:#000080; color:#FFF; font-family:monospace;">#000080</td>
          <td>silver</td>
          <td style="background:#C0C0C0; color:#000; font-family:monospace;">#C0C0C0</td>
        </tr>
        <tr>
          <td>black</td>
          <td style="background:#000; color:#FFF; font-family:monospace;">#000000</td>
          <td>green</td>
          <td style="background:#008000; color:#FFF; font-family:monospace;">#008000</td>
          <td>olive</td>
          <td style="background:#808000; color:#FFF; font-family:monospace;">#808000</td>
          <td>teal</td>
          <td style="background:#008080; color:#fff; font-family:monospace;">#008080</td>
        </tr>
        <tr>
          <td>blue</td>
          <td style="background:#00F; color:#FFF; font-family:monospace;">#0000FF</td>
          <td>lime</td>
          <td style="background:#0F0; color:#000; font-family:monospace;">#00FF00</td>
          <td>purple</td>
          <td style="background:#800080; color:#FFF; font-family:monospace;">#800080</td>
          <td>white</td>
          <td style="background:#FFF; color:#000; font-family:monospace;">#FFFFFF</td>
        </tr>
        <tr>
          <td>fuchsia</td>
          <td style="background:#F0F; color:#000; font-family:monospace;">#FF00FF</td>
          <td>maroon</td>
          <td style="background:#800000; color:#FFF; font-family:monospace;">#800000</td>
          <td>red</td>
          <td style="background:#F00; color:#FFF; font-family:monospace;">#FF0000</td>
          <td>yellow</td>
          <td style="background:#FF0; color:#000; font-family:monospace;">#FFFF00</td>
        </tr>
      </table>      
    </table>
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>


    <script type="text/javascript">
      //<![CDATA[

    var myArray = new Array();
    var noMore = false;
    var noMoreDel = false;
    var geocoder = new GClientGeocoder();

    if (GBrowserIsCompatible()) {

      var lastmarker;
      var markerID;
      var markerDetails;
      var myEventListener;
      var myEventMapListener;
      var middleage =  7;
      var oldage    = 30;
      var categories;
      function whenReady( id, callback ) {
        var interval = setInterval( function() {
            var element = document.getElementById( id );
            if( element ) {
            clearInterval( interval );
            callback( element );
            }
            }, 10 );
      }

      function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              createInputMarker(point,0,iwform)
            }
          }
        );
      }
    }

      // == creates a draggable marker with an input form ==
      function createInputMarker(point,ID,iwform) {
        if(!noMore){
          var marker = new GMarker(point,{draggable:true, icon:G_START_ICON});
          marker.ID = ID + 0;
          GEvent.addListener(marker, "click", function() {
              lastmarker = marker;
              marker.openInfoWindowHtml(iwform);
              whenReady( 'idinput', function( element) {
                element.focus();
                }); 

              });
          // noMore = true;
          map.addOverlay(marker);
          marker.openInfoWindowHtml(iwform);
          whenReady( 'idinput', function( element) {
              element.focus();
              }); 
          lastmarker=marker;
          return marker;
        }
      }

      // == creates a "normal" marker
      function createMarker(point,text,ID,color,label,pinage) { 
        var stroke = "000000"
          if (pinage > middleage){
            stroke = "c0c0c0";
          }
        if (pinage > middleage){
          stroke = "ffffff";
        }
        var newIcon = MapIconMaker.createLabeledMarkerIcon({width: 32, height: 32, primaryColor: color, cornerColor: color, strokeColor: stroke, label: label});
        markerOptions = {title:text , icon: newIcon};
        var marker = new GMarker(point,markerOptions);
        marker.ID = ID;
        myEventListener = new GEvent.addListener(marker, "SingleRightClick", function() {
            if(!noMoreDel){
            markerID = marker.ID;
            markerDetails = text;

            var delform = text + '<br />'
            + '<form onsubmit="processdel(this); return false" action="#">'
            + '  <input type="submit" id="delid" value="Delete" />'
            + '<\/form>';

            marker.openInfoWindowHtml(delform);
            whenReady( 'delid', function( element ) {
              element.focus();
              }); 
            // noMoreDel = true;
            lastmarker = marker;
            }
            });
        map.addOverlay(marker);
        lastmarker=marker;
        return marker;
      }

      function process(form) {
        // == obtain the data
        var ID = myArray.length + 1;
        var details = escape(form.data.value);
        var category = parseInt(form.category.value);
        var color = colors[category];
        var label = escape(form.label.value);
        var lat = lastmarker.getPoint().lat();
        var lng = lastmarker.getPoint().lng();
        var url = "details.txt?Action=add&ID=" +ID+ "&lat=" +lat+ "&lng=" +lng+ "&details="+details+"&category="+category+"&label="+label+"&place={{place}}";
        //GLog.write("About to send "+url+ " to the server"); 

        // ===== send the data to the server
        GDownloadUrl(url, function(doc) { 
            });  

        // == remove the input marker and replace it with a completed marker
        map.closeInfoWindow();
        map.removeOverlay(lastmarker);
        var marker = createMarker(lastmarker.getPoint(),details,ID,color,label,0);
        alert("Your information has been processed. You may hover over pushpins to see who others are.");

      }

      // == removes a normal marker with an input form ==
      function processdel(form) {
        // == obtain the data
        var url = "details.txt?Action=del&ID=" +markerID+"&place={{place}}";
        // GLog.write("About to send "+url+ " to the server"); 

        // ===== send the data to the server
        GDownloadUrl(url, function(doc) {    });  

        // == remove the input marker 
        map.closeInfoWindow();
        map.removeOverlay(lastmarker);
        // GEvent.removeListener(myEventListener);
        // GEvent.removeListener(myEventMapListener);
        alert("Your pushpin has been removed.");

      }

      // === Define the function thats going to read the stored data ===
      readData = function(doc) {
        // === split the document into lines ===
        lines = doc.split("\n");
        for (var i=0; i<lines.length; i++) {
          if (lines[i].length > 1) {
            // === split each line into parts separated by Tab and use the contents ===
            parts = lines[i].split(String.fromCharCode(9));
            var ID  = parts[0];
            var lat = parseFloat(parts[2]);
            var lng = parseFloat(parts[3]);
            var details = parts[4];
            var pincategory = parts[5];
            var label = parts[6];
            var point = new GLatLng(lat,lng);
            var pinage = parts[7];
            myArray[i] = new Array(lat,lng,details,point,ID,pincategory,label,pinage);
          }
        }
        // create the marker
        for (var j=0; j<myArray.length; j++) {
          var alat = myArray[j][0];
          var alng = myArray[j][1];
          var adetails = myArray[j][2];
          var apoint = myArray[j][3];
          var ID = myArray[j][4];
          var acolor = colors[myArray[j][5]];
          var alabel = myArray[j][6];
          var apinage = myArray[j][7];
          if(!isNaN(alat+alng)){
            // create the marker
            var marker = createMarker(apoint,adetails,ID,acolor,alabel,apinage);
          }
        }
      }          


      // == Display the map, with some controls and set the initial location 
      var map = new GMap2(document.getElementById("map"),{draggableCursor:"default"});
      map.addControl(new GLargeMapControl());
      var start = new GLatLng({{center_lat}},{{center_lng}});
      var marker_start = new GLatLng({{marker_lat}},{{marker_lng}});
      name = "{{place|addslashes}}";
      map.setCenter(start,{{map_zoom}});
      var startmarker = new GMarker(marker_start,{draggable:true, autoPan:false, title:name});
      map.addOverlay(startmarker);
      startmarker.setImage("http://maps.google.com/mapfiles/dd-end.png");

      // === read data entered by previous users ===
      GDownloadUrl("details.txt?place={{place}}", readData);      

      // extract colors from template_value color
      var colors = [];
      {% for s in color%}
      var tempindex = '{{forloop.counter0}}' ; 
      colors[tempindex] = '{{s}}' ; 
      {% endfor %}

      // create menu for iwform
      // first extract categories from template_value category
      var tempinput = '';
      {% for s in category %}
      tempinput = tempinput + '<option value="{{forloop.counter0}}" label="Category:">{{s}}<\/option>' ; 
      {% endfor %}

      var iwform = '{{pintext}}:<br />'
        + '<form onsubmit="process(this); return false" action="#">'
        + '  <input type="text" name="data" id="idinput" size="31" maxlength="31" tabindex="1"/>'
        + '<br />  Pin label:  <input type="text" value="{{ label }}"  name="label" size="3" maxlength="3" tabindex="2"/>'
        + '<br />  Pin category:  <select name="category" tabindex="3">'
        + tempinput
        + '<\/select>'
        + '  <input type="submit" value="Submit"  tabindex="4"/>'
        + '<\/form>';

      // == Listen for map click and add an input marker
      GEvent.addListener(map,"click",function(overlay,point){
          if (!overlay) {
          createInputMarker(point,0,iwform);
          }
          });

      myEventMapListener = new GEvent.addListener(map, "singlerightclick", function(a,b,overlay) {
          if(overlay){
          if(overlay instanceof GMarker){
          GEvent.trigger(overlay,"SingleRightClick");
          }
          }
          });
    }

// display a warning if the browser was not compatible
else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}

// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/   
// http://econym.googlepages.com/index.htm

//]]>
</script>

</body>

</html>
